<template>
  <div class="main">
    <div class="content">
      <div class="logo">
        <img src="@/assets/logo.png" alt />
      </div>
      <div class="input">
        <!-- 用户名输入框 -->
        <el-row :gutter="20">
          <el-col :span="8" :offset="8">
            <el-input placeholder="请输入用户名" suffix-icon="el-icon-user" v-model="username"></el-input>
          </el-col>
        </el-row>
        <!-- 密码输入框 -->
        <el-row :gutter="20" style='margin-top:5px'>
          <el-col :span="8" :offset="8">
            <el-input placeholder="请输入密码" v-model="password"  show-password></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="loginbtn">
        <el-row>
          <!-- 登录按钮 -->
          <el-button type="primary" @click="login()">登录</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      username: "",
      password: "",
    }
  },
  methods: {
    login(){

      //请求登录的数据接口
      let that=this;
      this.$http.post("login",{
        username:this.username,
        password:this.password
      })
      //.then:表示请求成功后执行的函数
      .then(function(res){
        console.log('aaa')
        console.log(res);
        if(res.data.meta.status==200){
          //提示登录成功
          //调用$alert方法即可打开消息提示，它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。
          //此例中接收了两个参数，message和title。（message为弹框内容，title为弹框标题）
          //值得一提的是，窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。
          //若不确定浏览器是否支持Promise，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。
          that.$alert(res.data.meta.msg,'登录信息',{
            confirmButtonText:'确定',
            callback:action=>{
              console.log("ddd",this)
              //token令牌保存
              localStorage.setItem("token",res.data.data.token)
              //成功后完成跳转
              that.$router.push("/home");
            }
          })
        }else{
          that.$alert(res.data.meta.msg,'登录信息',{
            confirmButtonText:'确定',
            callback:action=>{
              that.message({
                type:'info',
                message:`action:${action}`
              });
            }
          })
        }
      })
    }    
  }
};
</script>

<style scoped>
  .content{
    width:700px;
    height: 350px;
    background-color: white ;
    position: absolute;
    top: 200px;
    left: 25%;
    border-radius: 5px;
    text-align: center;
  }
  .logo{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color:white;
    position: absolute;
    left: 40%;
    top:-60px;
    overflow: hidden;
    text-align: center;
  }
  .logo>img{
    width: 100%;
  }
  .input{
    margin-top:130px;
  }
  .loginbtn{
    margin-top:10px;
  }
</style>